<template>
  <el-container style="height: 755px; border: 1px solid #45c2b5;">
    <el-aside  style="border-right: 1px solid #45c2b5; width: 220px;">
      <el-menu  :default-openeds="['1']">
        <el-submenu index="1"  >
          <template slot="title" ><i class="el-icon-user"></i>在线列表</template>
          <el-menu-item-group>
            <el-menu-item index="1-(index+1)" @click="chooseUser(user)"
                          v-for="(user,index) in userList"
                          :class="{'bgcolor':active==index}"
                          v-text="user.username"
                          :key="index">{{index}}</el-menu-item>
          </el-menu-item-group>
<!--          <el-submenu index="1-1">-->
<!--            <el-menu-item index="1-1-1"  v-for="(user,index) in userList">-->
<!--              <el-badge :value="3" class="item" v-text="user.username">-->
<!--              </el-badge>-->
<!--            </el-menu-item>-->
<!--            <el-menu-item index="1-4-3">-->
<!--              <el-badge :value="5" class="item">-->
<!--                规划师003-->
<!--              </el-badge>-->
<!--            </el-menu-item>-->
<!--            <el-menu-item index="1-4-4">-->
<!--              <el-badge :value="1" class="item">-->
<!--                规划师004-->
<!--              </el-badge>-->
<!--            </el-menu-item>-->
<!--          </el-submenu>-->
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="height: 55px">
        <span>聊天信息</span>
      </el-header>

      <el-main style="height: 700px ; padding: 0;">
        <el-row style="height: 490px ; overflow: auto;">
          <el-col :span="24">
            <div v-for="(chat,index) in chatInfos">
              <div class="div-msg" v-if="chat.order === 1">
                <div class="div-left-msg" v-html="chat.msg"></div>
              </div>
              <div class="div-msg" v-if="chat.order === 2">
                <div class="div-right-msg" v-html="chat.msg"></div>
              </div>
<!--              <div class="div-empty"></div>-->
            </div>
          </el-col>
        </el-row>
        <el-row style="height: 208px; border-top:1px solid #45c2b5 ">
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <el-input type="textarea" class="chat-textarea" placeholder="请输入内容" @keydown.enter.native="keyDown" v-model="chatMsg"></el-input>
              <el-row>
                <el-button class="send-message" type="success" @click="websocketsend()" >发送消息</el-button>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  export default {
    data () {
      return {
        active: -1,
        chatMsg: '',
        userList: [],
        chatInfos: [
          {
            order: 0,
            msg: ''
          }
        ],
        scoket: {},
        currentUser: {}
      }
    },
    created () {
      this.getDataList()
      this.initWebSocket()
    },
    destroyed () {
      // 离开路由之后断开websocket连接
      this.socket.close()
    },
    methods: {
      // 获取在线用户列表
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/sys/user/online/list'),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          this.userList = data.users
          this.dataListLoading = false
          console.log('userList' + JSON.stringify(this.userList))
        })
      },
      // 初始化websocket
      initWebSocket () {
        const wsUrl = 'ws://localhost' + '/api/chat/'
        this.scoket = new WebSocket(wsUrl + this.$store.state.user.name)
        this.scoket.onmessage = this.websocketonmessage
        this.scoket.onopen = this.websocketonopen
        this.scoket.onerror = this.websocketonerror
        this.scoket.onclose = this.websocketclose
      },
      // 连接建立之后执行send方法发送数据
      websocketonopen () {
        // let actions = {'test': '12345'}
        // this.websocketsend(JSON.stringify(actions))
      },
      websocketonerror () { // 连接建立失败重连
        this.initWebSocket()
      },
      // 数据接收
      websocketonmessage (e) {
        console.log(JSON.stringify(e.data))
        var chat = {order: 2, msg: e.data}
        this.chatInfos.push(chat)
      },
      // 数据发送
      websocketsend () {
        if (this.scoket) {
          var msg = {fromId: this.$store.state.user.name, toId: this.currentUser.username, chatType: 0, msg: this.chatMsg}
          this.scoket.send(JSON.stringify(msg))
          var chat = {order: 1, msg: this.chatMsg}
          this.chatInfos.push(chat)
          this.chatMsg = ''
        }
      },
      websocketclose (e) {  // 关闭
        console.log('断开连接', e)
      },
      // 选择用户
      chooseUser (user) {
        this.currentUser = user
      },
      keyDown (e) {
        if (e.ctrlKey && e.keyCode == 13 && this.chatMsg) {
          this.websocketsend()
          this.chatMsg = ''
        }
      }
    }
  }
</script>

<style>
.bgcolor{
  background-color: red;
}
  .el-header {
    background: #45c2b5;
    color: #ffffff;
    line-height: 55px;
    text-align: right;
  }

  .el-aside {
    background: #45c2b5;
    color: #45c2b5;
  }
  .el-submenu__title{
    color:#45c2b5 ;
  }
  .el-icon-message{
    color:#45c2b5 ;
  }
  .chat-textarea{
    height: 100%;
  }
  .chat-textarea textarea{
    height: 160px;
    outline: none;
  }
  .send-message{
    float: right;margin-top: 5px;margin-right: 5px;
    background: #45c2b5;
    border-color:#45c2b5;
  }

  .send-message.is-active, .send-message:active{
    background: #4fcdbf;
    border-color: #4fcdbf;
    color: #fff;
  }
  .send-message:focus, .send-message:hover{
    background: #4fcdbf;
    border-color: #4fcdbf;
    color: #fff;
  }
  .div-msg{
    width: 100%;
    padding: 10px;
    min-height: 40px;
    clear: both;
  }
  .div-left-msg{
    max-width: 55%;
    background: #f0f9eb;
    float: left;
    padding: 5px;
    border: 1px solid #e1f3d8;
    border-radius: 5px;
    font-size: 14px;
    color: #67c23a;
  }
  .div-right-msg{
    max-width: 55%;
    background: #fef0f0;
    float: right;
    padding: 5px;
    border: 1px solid #fde2e2;
    border-radius: 5px;
    font-size: 14px;
    color: #f56c6c;
  }
</style>
